<template>
  <el-breadcrumb separator="/">
    <transition-group name="list">
      <el-breadcrumb-item v-for="match in matches" :to="match.redirect === 'noredirect' ? '' : match.path" :key="match.path">{{match.meta.title}}</el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
export default {
  name: 'Breadcrumb',
  data () {
    return {
      matches: []
    }
  },
  created () {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.getBreadcrumbItems()
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'getBreadcrumbItems'
  },
  methods: {
    getBreadcrumbItems: function () {
      let matches = this.$route.matched.filter(record=>{return 'title' in record.meta})
      this.matches = matches
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .list-enter-active, .list-leave-active {
    transition: all .5s;
  }
  .list-leave-active {
    position: absolute;
  }

  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
</style>
